<!DOCTYPE HTML>
<html>
<head>
<#include "/adminPage/common.html"/>
<style type="text/css">
.layui-form-label {
	width: 150px;
}

.layui-input-block {
	margin-left: 180px;
}

.path{
	display: inline-block;
	margin-right:5px;
	margin-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	background-color: #CFFFBF;
	
	max-width:100px;
	
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
.value{
	display: inline-block;
	margin-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	background-color: #BFDFFF;
	
	max-width:300px;
	
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	
}
.liteBtn{
	width: 100px;
}
.blk{
	display: inline-block;
	width: 100px;
}
.blk2{
	display: inline-block;
	width: 40px;
}

.layui-icon{
	cursor: pointer;
}

.blue{
	font-weight: bolder;
}

.short{
	width: 200px;
}
.long{
	width: 300px;
	display: inline-block;
}

#paramList td{
	padding-left: 5px!important;
	padding-right: 5px!important;
	padding-top:0px!important;
	padding-bottom:0px!important; 
	height: 110px;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin" >

		<#include "/adminPage/header.html"/>
		<#include "/adminPage/menu.html"/>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>${menuStr.server}</legend>
				</fieldset>

				<form action="${ctx}/adminPage/server" id="searchForm" method="post">
					<div class="layui-form">
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-normal" onclick="add()">${serverStr.add}</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-input-inline" onclick="openImport()">${serverStr.importServer}</button>
						</div>
						
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-normal" onclick="testPort()">${serverStr.testPort}</button>
						</div>
							
						<div class="layui-inline">
							<input type="text" name="keywords" class="layui-input" value="${keywords}">
						</div>
					
						<button type="button" class="layui-btn" onclick="search()">${commonStr.search}</button>
						
						
						<input type="hidden" name="sort" id="sort" value="${sort}">
						<input type="hidden" name="direction" id="direction" value="${direction}">
						
						<input type="hidden" name="curr" value="${page.curr}">
						<input type="hidden" name="limit" value="${page.limit}">
					</div>
			
					<table class="layui-table layui-form" >
						<thead>
							<tr>
								<th>${serverStr.transpondType} <i class="layui-icon ${(direction=='desc'&&sort=='proxyType')?string('layui-icon-down','layui-icon-up')} ${(sort=='proxyType')?string('blue','')}" id="proxyTypeSort"  onclick="sort('proxyTypeSort')"></i></th>
								<th>${serverStr.listen} <i class="layui-icon ${(direction=='desc'&&sort=='listen')?string('layui-icon-down','layui-icon-up')} ${(sort=='listen')?string('blue','')}" id="listenSort"  onclick="sort('listenSort')"></i></th>
								<th>${serverStr.serverName} <i class="layui-icon ${(direction=='desc'&&sort=='serverName')?string('layui-icon-down','layui-icon-up')} ${(sort=='serverName')?string('blue','')}" id="serverNameSort" onclick="sort('serverNameSort')"></i></th>
								<th>${serverStr.ssl}</th>
								<th>${serverStr.sslOption}</th>
								<th>${serverStr.proxyTarget}</th>
								<th>${serverStr.status}</th>
								
								<th style="width: 200px;">${serverStr.descr}</th>
								<th>${commonStr.operation}</th>
							</tr>
						</thead>
						<tbody>
							<#list page.records as ext>
							<tr>
								<td>
									<#if ext.server.proxyType==0>http</#if>
									<#if ext.server.proxyType==1>TCP</#if>
									<#if ext.server.proxyType==2>UDP</#if>
								</td>
								<td>${ext.server.listen} <#if ext.server.def == 1>default</#if></td>
								<td>
									<#if ext.server.serverName==''>${serverStr.all}</#if>
									<#if ext.server.serverName!=''>${ext.server.serverName}</#if>
								</td>
								<td>
									<#if ext.server.ssl==0>${commonStr.no}</#if>
									<#if ext.server.ssl==1>${commonStr.yes}</#if>
								</td>
								<td>
									<#if ext.server.ssl==1> 
										<span class="blk">${serverStr.httpToHttps}：</span>
										<#if ext.server.rewrite==0>${commonStr.no}</#if> 
										<#if ext.server.rewrite==1>${commonStr.yes}</#if> 
										<br>
										<span class="blk">${serverStr.http2}：</span>
										<#if ext.server.http2==0>${commonStr.no}</#if> 
										<#if ext.server.http2==1>${commonStr.yes}</#if> 
									</#if>
								</td>
							
								
								<td>
									${ext.locationStr} 
								</td>
	
								<td>
									<input type="checkbox" name="enable" lay-filter="enable" value="${ext.server.id}" lay-text="ON|OFF" lay-skin="switch" ${(ext.server.enable)?string('checked','')}>
								</td>
								
								<td>
									${ext.server.descr} 
									<a href="javascript:editDescr('${ext.server.id}','${ext.server.descr}')" style="color: blue;text-decoration: underline;">${commonStr.edit}</a> 
								</td>
								
								
								<td>
									<button type="button" class="layui-btn layui-btn-sm" onclick="edit('${ext.server.id}', false)">${commonStr.edit}</button>
									<button type="button" class="layui-btn layui-btn-sm" onclick="clone('${ext.server.id}')">${commonStr.clone}</button>
									<button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick="del('${ext.server.id}')">${commonStr.del}</button>
									
								</td>
							</tr>
							</#list>
						</tbody>
					</table>
					<div id="pageInfo"></div>
				</form>
			</div>
		</div>
	</div>

	<div style="height: 0px; width: 0px; overflow: hidden;">
		<!-- 弹出框 -->
		<div class="layui-form" id="windowDiv" style="padding: 15px; display: none">
			<form id="addForm">
				<input type="hidden" id="id" name="id">
				
				<div class="layui-form-item" style="padding: 0 15px;">
					<label class="layui-form-label">${serverStr.transpondType}</label>
					<div class="layui-input-inline">
						<select name="proxyType" id="proxyType" lay-filter="proxyType">
							<option value="0">http</option>
							<option value="1">TCP</option>
							<option value="2">UDP</option>
						</select>
					</div>
					
					<div class="proxyTcp">
						<label class="layui-form-label">${serverStr.toUpstream}</label>
						<div class="layui-input-inline">
							<select name="proxyUpstreamId" id="proxyUpstreamId">
								<#list upstreamTcpList as upstream>
								<option value="${upstream.id}">${upstream.name}</option>
								</#list>
								
								<#if upstreamTcpSize == 0>
								<option value="">${serverStr.noUpstream}</option>
								</#if>
							</select>
						</div>
					</div>
					
					
					<div class="pemDiv">
						<div class="proxyHttp">
							<label class="layui-form-label">&nbsp;</label>
							<div class="layui-input-block">
								<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectCert()">${serverStr.selectCert}</button>
								<div class="layui-form-mid layui-word-aux"></div>
							</div>
						</div>
					</div>
					
					
				</div>
							
				<div class="layui-container" >
					<div class="layui-row">
						<div class="layui-col-md4">
							<div class="layui-form-item">
								<label class="layui-form-label">${serverStr.listen}<span class="red">*</span></label> 
								<div class="layui-input-inline">
									<input type="text" name="ip" id="ip" class="layui-input" style="width: 125px;display: inline-block;" placeholder="${serverStr.ipDefault}">
									<input type="text" name="listen" id="listen" style="width: 60px;display: inline-block;" class="layui-input" placeholder="${serverStr.port}">
									
									<input type="checkbox" name="def" id="def" title="${serverStr.default}" lay-skin="primary"> 
								</div>
							</div>
							
							<div class="proxyHttp">
								<div class="layui-form-item">
									<label class="layui-form-label">${serverStr.serverName}</label>
									<div class="layui-input-inline">
										<input type="text" name="serverName" id="serverName" class="layui-input" placeholder="${serverStr.example}: www.baidu.com">
									</div>
								</div>
	
								<div class="layui-form-item">
									<label class="layui-form-label">${serverStr.ssl}</label>
									<div class="layui-input-inline">
										<select name="ssl" id="ssl" lay-filter="ssl">
											<option value="0">${commonStr.no}</option>
											<option value="1">${commonStr.yes}</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="layui-col-md8 proxyHttp">
							<div class="pemDiv"  style="display: none;">
								<div class="layui-form-item">
									<label class="layui-form-label">${serverStr.pemPath}</label>
									<div class="layui-input-block">
										<button type="button" class="layui-btn layui-btn-sm liteBtn" id="pemBtn">${serverStr.uploadPem}</button>
										
										<button type="button" class="layui-btn layui-btn-sm layui-btn-normal liteBtn" onclick="selectPem()">${commonStr.selectPath}</button>
										
										<input type="hidden" name="pem" id="pem" class="layui-input">
										<div class="layui-form-mid layui-word-aux ellipsis" id="pemPath"></div>
										
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">${serverStr.keyPath}</label>
									<div class="layui-input-block">
										<button type="button" class="layui-btn layui-btn-sm liteBtn" id="keyBtn">${serverStr.uploadKey}</button>
										
										<button type="button" class="layui-btn layui-btn-sm layui-btn-normal liteBtn" onclick="selectKey()">${commonStr.selectPath}</button>
										
										<input type="hidden" name="key" id="key" class="layui-input">
										<div class="layui-form-mid layui-word-aux ellipsis" id="keyPath" ></div>
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">${serverStr.httpToHttps}</label>
									<div class="layui-input-inline" style="width: 100px;">
										<select name="rewrite" id="rewrite">
											<option value="1">${commonStr.yes}</option>
											<option value="0">${commonStr.no}</option>
										</select>
									</div>
									
									<label class="layui-form-label" style="width: 80px;">${serverStr.http2}</label>
									<div class="layui-input-inline" style="width: 100px;">
										<select name="http2" id="http2">
											<option value="1">${commonStr.yes}</option>
											<option value="0">${commonStr.no}</option>
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-sm" style="margin-left: 195px;" onclick="serverParam()">${serverStr.extParm}</button>
					<textarea style="display: none;" id="serverParamJson" name="serverParamJson"></textarea>
				</div>
					
				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-normal proxyHttp" onclick="addItem()">${serverStr.addLocation}</button>
				</div>

				<div class="layui-form-item proxyHttp">
					<table class="layui-table">
						<thead>
							<tr>
								<th>${serverStr.listenPath}</th>
								<th>${serverStr.proxyType}</th>
								<th style="width: 550px;">${serverStr.proxyTarget}</th>
								<th>${commonStr.operation}</th>
							</tr>
						</thead>
						<tbody id="itemList" class="itemList">

						</tbody>
					</table>
				</div>


				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-normal" onclick="addOver()">${commonStr.submit}</button>
					<button type="button" class="layui-btn" onclick="layer.closeAll()">${commonStr.close}</button>
				</div>
			</form>
		</div>
		
		<div id="paramJsonDiv" style="display: none;padding: 15px;"> 
			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="addParam()">${serverStr.addParm}</button>
				
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectTemplate('paramList')">${serverStr.addTemplate}</button>
			</div>
			<div class="layui-form-item">
				<input type="hidden" id="targertId" >
				<table class="layui-table">
					<thead>
						<tr>
							<th>${commonStr.name}</th>
							<th>${commonStr.value}</th>
							<th style="width: 170px;">${commonStr.operation}</th>
						</tr>
					</thead>
					<tbody id="paramList">

					</tbody>
				</table>
			</div>

			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-normal" onclick="addParamOver()">${commonStr.submit}</button>
				<button type="button" class="layui-btn" onclick="layer.close(paramIndex)">${commonStr.close}</button>
			</div>
		</div>

		<div id="upstreamSelect" style="display: none;"> 
			<div class="layui-inline" style="width: 150px;">
				<select name="upstreamId" >
					
					<#list upstreamList as upstream>
					<option value="${upstream.id}">${upstream.name}</option>
					</#list>
					
					<#if upstreamSize == 0>
					<option value="">${serverStr.noUpstream}</option>
					</#if>
				</select>
			</div>
			<div class="layui-inline" style="width: 150px;">
				<input type="text" name="upstreamPath" class="layui-input" placeholder="${serverStr.extPathTips}">
			</div>
		</div>
		
		<div id="certDiv"  style="padding: 15px; display: none"> 
			<div class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label">${serverStr.selectCert}</label>
					<div class="layui-input-inline">
						<select name="certId" id="certId">
							<#list certList as cert>
								<option value="${cert.id}">${cert.domain}</option>
							</#list>
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-normal" onclick="selectCertOver()">${commonStr.submit}</button>
					<button type="button" class="layui-btn" onclick="layer.close(certIndex)">${commonStr.close}</button>
				</div>
			</div>
		</div>
		<!-- 选择导入文件弹出框 -->
		<div class="layui-form" id="importDiv" style="padding: 15px; display: none">
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" id="nginxPath" name="nginxPath" class="layui-input" placeholder="${commonStr.filePath}" >
				</div>
				<div class="layui-input-inline">
					<i class="layui-icon layui-icon-export" onclick="selectRootCustom('nginxPath')"></i>
				</div>
			</div>
			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-normal" onclick="importServer()">${serverStr.importServer}</button>
				<button type="button" class="layui-btn" onclick="layer.close(importIndex)">${commonStr.close}</button>
			</div>
		</div>
		
		
		<div class="layui-form" id="descrDiv" style="padding: 15px; display: none">
			<input type="hidden" id="serverId" name="serverId">
			<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 100%">
					<textarea type="text" id="descr" name="descr" class="layui-textarea" >
					
					</textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-normal" onclick="editDescrOver()">${commonStr.ok}</button>
				<button type="button" class="layui-btn" onclick="layer.closeAll()">${commonStr.close}</button>
			</div>
		</div>
	</div>

	<#include '/adminPage/script.html'/>
	<#include '/adminPage/select_root.html'/>
	<#include '/adminPage/select_template.html'/>
	<script src="${ctx}/js/adminPage/server/index.js?v=${jsrandom}" type="text/javascript"></script>
</body>


</html>